// web/src/app/(employee)/_components/hot-company.tsx
import React from 'react';
import {db} from "@/lib/db";
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import Link from "next/link";
import {formatPrice} from "@/lib/format";

const HotCompany = async () => {
    // 获取随机几个企业
    const full = await db.company.findMany({
        // take: 6,
        include: {
            Employee: {
                include: {city: true}
            }
        },
    })
    const companies = full.filter(c => c.Employee.length > 0)

    return (
        <>
            <h1 className={`text-3xl text-center font-semibold m-4`}>热门企业</h1>
            <div className={`flex h-44x flex-wrap flex-row w-full gap-x-7 gap-y-4 justify-center items-center`}>
                {companies && companies.slice(0, 6).map(c => (
                    <Link className={`max-h-96 max-w-[29%] w-[29%] h-44x`} href={`/company/${c.id}`} key={c.id}>
                        <Card className={`hover:shadow-lg hover:scale-105 transition-all duration-200
                        active:shadow-none active:scale-100 bg-sky-200/30`}>
                            <CardHeader>
                                <CardTitle className={`flex flex-row items-center`}>
                                    <Avatar className={`size-10 mr-2 rounded-full`}>
                                        <AvatarImage className={`rounded-full`} src={c.image!}/>
                                        <AvatarFallback className={`bg-blue-400 text-white rounded-full`}>
                                            {c.name.charAt(0).toUpperCase()}
                                        </AvatarFallback>
                                    </Avatar>
                                    {c.name}
                                </CardTitle>
                            </CardHeader>
                            <CardContent>
                                {/*link套link会出水和错误*/}
                                <CardDescription className={`max-w-[24vw] p-0 space-y-1`}>
                                    {/*{c.description}*/}
                                    {/*{c.Employee && c.Employee.slice(0, 1).map(e => (*/}
                                    <Card className={`h-56x`}
                                          key={c.Employee[0].id}>
                                        <CardHeader>
                                            <CardTitle className={`flex flex-row items-center`}>
                                                            <span className={`truncate`}>
                                                                {c.Employee[0].name}
                                                            </span>
                                            </CardTitle>
                                        </CardHeader>
                                        <CardFooter
                                            className={`flex justify-between flex-row items-center gap-x-2`}>
                                                        <span>
                                                            {c.Employee[0].city.name}
                                                        </span>
                                            <span>
                                                            工资: {formatPrice(c.Employee[0].salary)}
                                                        </span>
                                        </CardFooter>
                                    </Card>
                                    {/*))}*/}
                                    {/*{(!c.Employee || c.Employee.length === 0) && (*/}
                                    {/*    <div>*/}
                                    {/*        没有发布职位*/}
                                    {/*    </div>*/}
                                    {/*)}*/}
                                </CardDescription>
                            </CardContent>
                        </Card>
                    </Link>
                ))}
            </div>
        </>
    );
};

export default HotCompany;